<template>
  <!-- 规则内容 -->
  <uv-popup ref="rulePopup" round="8px" :closeOnClickOverlay="false" @touchmove.stop.prevent="">
    <view class="rule-popup-container">
      <view class="header">
        <text class="title">{{ ruleInfo.title }}</text>
        <view class="popup-close" @click="close"><uv-icon name="close" color="#fff" size="22" /></view>
      </view>
      <scroll-view scroll-y class="scroll-content">
        <view class="content" v-html="ruleInfo.content"> </view>
      </scroll-view>
    </view>
  </uv-popup>
</template>

<script>
export default {
  name: 'activityRule',
  components: {},
  mixins: [],
  props: {
    ruleInfo: {
      type: Object,
      default: () => ({
        title: '活动规则',
        content: '',
      }),
    },
  },
  data() {
    return {}
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {},
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    open() {
      this.$refs.rulePopup.open()
    },
    close() {
      this.$refs.rulePopup.close()
    },
  },
}
</script>

<style lang="scss" scoped>
.rule-popup-container {
  position: relative;
  width: calc(100vw - 120rpx);
  .header {
    position: relative;
    padding: 50rpx 80rpx;
    background: linear-gradient(180deg, #0da199 0%, #ffffff 100%);
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    .popup-close {
      position: absolute;
      width: 24px;
      height: 24px;
      right: 26rpx;
      top: 24rpx;
      border-radius: 50%;
      overflow: hidden;
      z-index: 99;
    }
  }
  .scroll-content {
    min-height: 400rpx;
    max-height: 840rpx;
    margin-bottom: 20rpx;
  }
  .content {
    padding: 0 30rpx;
    color: #666;
  }
}
</style>
